<template>
  <div class="dialog">
    <el-dialog v-model="queryOpen" width="25%" :before-close="handleClose" :modal="false" draggable>
      <!-- 查询 -->
      <div class="dialog-con">
        <div v-if="dialogState === 1">
          <div class="dialog-con-title">单位注册审核进度查询</div>
          <el-form
            size="small"
            :model="formCompany.form"
            :rules="formCompany.rules"
            ref="formCompanyFrom"
            label-width="75px"
            style="margin-top: 24px"
          >
            <el-form-item label="单位名称" prop="companyNmae">
              <el-input
                v-model.trim="formCompany.form.companyNmae"
                placeholder="请输入单位名称"
                maxLength="40"
                clearable
              >
              </el-input>
            </el-form-item>
            <el-form-item label="申请人" prop="applyNmae">
              <el-input
                v-model.trim="formCompany.form.applyNmae"
                placeholder="请输入申请人姓名"
                maxLength="40"
                clearable
              >
              </el-input>
            </el-form-item>
            <el-form-item label="申请电话" prop="applyPhone">
              <el-input
                v-model.trim="formCompany.form.applyPhone"
                placeholder="请输入申请电话"
                maxLength="40"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div class="dialog-con-btn" @click="clickSearch">查询</div>
        </div>
        <!-- 审核通过 -->
        <div v-if="dialogState === 2">
          <div class="dialog-con-img">
            <img src="@/assets/img/register/icon_success.png" alt="" />
          </div>
          <div class="dialog-con-title">单位注册已通过审核</div>
          <el-form size="small" :model="formCompany.form" label-width="75px" style="margin-top: 24px">
            <el-form-item label="单位代码">
              <el-input v-model.trim="formCompany.form.companyNmae" maxLength="40"> </el-input>
            </el-form-item>
            <el-form-item label="初始密码">
              <el-input v-model.trim="formCompany.form.password" maxLength="40"> </el-input>
            </el-form-item>
          </el-form>
          <div class="dialog-con-btn" @click="clickLogin">去登录</div>
        </div>
        <!-- 审核中 -->
        <div v-if="dialogState === 3">
          <div class="dialog-con-img">
            <img src="@/assets/img/register/icon_loading.png" alt="" />
          </div>
          <div class="dialog-con-title">单位注册正在审核中…</div>
          <div class="dialog-con-tips">请耐心等待</div>
        </div>
        <!-- 审核驳回 -->
        <div v-if="dialogState === -1">
          <div class="dialog-con-img">
            <img src="@/assets/img/register/icon_fail.png" alt="" />
          </div>
          <div class="dialog-con-title">单位注册已驳回</div>
          <div class="dialog-con-tips">由于{{ reason }}原因予以驳回</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted, watch, defineProps, defineEmits} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';
import registerApi from '@/api/register.ts';
import {validateAccount} from '@/utils/validator.js';

const router = useRouter();
const queryOpen = ref(true);
const dialogState = ref(1);
const reason = ref('');
const formCompanyFrom = ref(null);
const formCompany = reactive({
  form: {companyNmae: '', applyNmae: '', applyPhone: '', password: ''},
  rules: {
    companyNmae: [{required: true, message: '请输入单位名称', trigger: 'blur'}],
    applyNmae: [{required: true, message: '请输入申请人姓名', trigger: 'blur'}],
    applyPhone: [{validator: validateAccount, trigger: 'blur'}],
  },
});

const props = defineProps({
  queryOpen: Boolean,
});

const emit = defineEmits(['closeDialog']);

const handleClose = () => {
  emit('closeDialog');
};
// 查询
const clickSearch = () => {
  formCompanyFrom.value.validate((valid) => {
    if (valid) {
      registerApi
        .companyExamineSerch({
          type: 'unit_register ',
          unit_name: formCompany.form.companyNmae,
          apply_user: formCompany.form.applyNmae,
          apply_mobile: formCompany.form.applyPhone,
        })
        .then((res) => {
          if (!res.data) {
            ElMessage.error('填写的信息有误！');
            return;
          }
          switch (res.data.status) {
            case 0:
              dialogState.value = 3;
              break;
            case 1:
              dialogState.value = 2;
              formCompany.form.companyNmae = res.data.unit_data.unit_code;
              formCompany.form.password = res.data.unit_data.unit_code;
              break;
            case -1:
              reason.value = res.data.reason;
              dialogState.value = -1;
              break;
            default:
              break;
          }
        })
        .catch((err) => {
          throw err;
        });
    }
  });
};
// 登录
const clickLogin = () => {
  router.push({name: 'login'});
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
.dialog {
  &:deep(.el-dialog__headerbtn .el-dialog__close) {
    color: #000;
    font-size: 26px;
  }
  &-con {
    padding: 0 70px 50px;
    display: flex;
    justify-content: center;
    &-img {
      width: 87px;
      height: 87px;
      margin: 0 auto;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    &-title {
      color: #333333;
      font-size: 22px;
      text-align: center;
      font-weight: 500;
      margin-top: 17px;
    }
    &-tips {
      font-size: 13px;
      text-align: center;
      color: #333333;
      margin-top: 13px;
    }
    &-btn {
      width: 382px;
      height: 40px;
      background: #3369f4;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      color: #ffffff;
      line-height: 40px;
      margin-top: 40px;
      cursor: pointer;
    }
  }
  .el-form-item {
    margin-top: 25px;
  }
  &:deep(.el-input) {
    width: 280px;
  }
  &:deep(.el-form-item__label) {
    font-size: 13px;
    color: #333333;
    text-align: left !important;
  }
  &:deep(.el-input__wrapper) {
    width: 315px;
    height: 36px;
    background: #f2f4f9;
    border-radius: 4px;
    box-shadow: none !important;
  }
  &:deep(.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before) {
    content: '' !important;
    margin-right: 0;
  }
}
</style>
